<script setup>
import {onMounted, reactive, ref} from "vue";
import {Line} from "@antv/g2plot";
import axios from "axios";
import {MdPreview, MdEditor} from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import {message} from "ant-design-vue";

const editText = ref()
const text = ref();
const data = ref([])
const activeKey = ref('chart');

const loadData = async () => {
  await axios({
    method: "get",
    url: "http://127.0.0.1:8888/zdppy_amg2plot_line?size=10000&yearMonth=notnull&order=keyDate"
  }).then(resp => {
    if (resp.data && resp.data.data && resp.data.data.results) {
      data.value = resp.data.data.results
    }
  })
}

onMounted(async () => {
  await loadData()
  console.log("data", data.value)
  const line = new Line('container', {
    data: data.value,
    padding: 'auto',
    xField: 'yearMonth',
    yField: 'value',
    xAxis: {
      // type: 'timeCat',
      tickCount: 5,
    },
  });

  line.render();
})

// form
const blog = ref()
const uniKey = "/line/basic2"
const isEdit = ref(false)
const title = ref("")
const description = ref("")
const updateBlog = async (data) => {
  console.log(data)
  await axios({
    method: "put",
    url: `http://127.0.0.1:8888/zdppy_amblog_markdown/${blog.value.id}`,
    data,
  }).then(() => {
    message.success("修改代码成功")
    activeKey.value = "code"
  })
}
const loadBlog = async () => {
  await axios({
    method: "get",
    url: `http://127.0.0.1:8888/zdppy_amblog_markdown?uniKey=${uniKey}`
  }).then(resp => {
    console.log("loadBlog", resp.data)
    if (resp.data && resp.data.data && resp.data.data.results && resp.data.data.results.length > 0) {
      blog.value = resp.data.data.results[0]
      text.value = blog.value.content
      title.value = blog.value.title
      description.value = blog.value.description
      editText.value = blog.value.content
      isEdit.value = true
    }
  })
}
const saveBlog = async (data) => {
  console.log("save", data)
  await axios({
    method: "post",
    contentType: "application/json",
    url: "http://127.0.0.1:8888/zdppy_amblog_markdown",
    data,
  }).then(() => {
    message.success("保存代码成功")
  })
}
const handleEditorSubmit = async () => {
  if (!title.value) {
    message.warning("文章的标题不能为空")
    return
  }
  if (!editText.value) {
    message.warning("文章的内容不能为空")
    return;
  }
  const data = {
    uniKey,
    title: title.value,
    description: description.value,
    content: editText.value,
  }
  if (isEdit.value) {
    await updateBlog(data)
  } else {
    await saveBlog(data)
  }
  await loadBlog()
}

onMounted(async () => {
  await loadBlog()
})
</script>

<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="chart" tab="图表">
      <div id="container"></div>
    </a-tab-pane>
    <a-tab-pane key="code" tab="源码">
      <MdPreview v-model="text"/>
    </a-tab-pane>
    <a-tab-pane key="edit" tab="编辑">
      <a-form-item label="标题">
        <a-input v-model:value="title"/>
      </a-form-item>
      <a-form-item label="描述">
        <a-textarea v-model:value="description"/>
      </a-form-item>
      <a-form-item label="内容">
        <MdEditor v-model="editText"/>
      </a-form-item>
      <a-form-item>
        <a-button
            type="primary"
            html-type="submit"
            style="margin-left: 40px"
            @click="handleEditorSubmit"
        >
          提交
        </a-button>
      </a-form-item>
    </a-tab-pane>
  </a-tabs>
</template>

<style scoped>

</style>